<template>
  <div class="content">
    <p class="top_p"><span>1</span> 基本信息 —————————— <span>2</span> 参数配置 {{ pinia.$state.peopleOnePageNewData.portsId }}</p>
    <div class="middle">
      <a-form name="basic" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
        <!-- 输入参数表格------------------------------1----------------------------1--------1--------------- -->
        <a-form-item label="" :wrapper-col="{ span: 23 }" name="codepeizhi">
          <tabless :num="1" :column="columns1" :data-source="dataSource1"></tabless>
        </a-form-item>

        <!-- 请求Body表格------------------------------2----------------------------2--------2-------------- -->
        <a-form-item label="" :wrapper-col="{ span: 23 }" name="codepeizhi">
          <tabless :num="2" :column="columns2" :data-source="dataSource2"></tabless>
        </a-form-item>

        <!-- 返回参数表格------------------------------3----------------------------3-------3--------------- -->
        <a-form-item label="" :wrapper-col="{ span: 23 }" name="codepeizhi">
          <tabless :num="3" :column="columns3" :data-source="dataSource3"></tabless>
        </a-form-item>
      </a-form>
    </div>
    <a-button class="testbtn" @click="showTestModal">测试</a-button>
    <footer>
      <a-button type="primary" @click="handlePre">上一步</a-button>&nbsp; &nbsp;

      <a-button type="primary">取消</a-button>&nbsp;
      <a-button type="primary" @click="handleClickSaveAndQuit">保存并退出</a-button>
    </footer>
    <test-page :test-value="testValue" @test-show="showTestDialog"></test-page>
  </div>
</template>
<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { Registration1, RegistrationInput, RegistrationBody, RegistrationBack } from '@/api/test/interFace';
  import { DataItemInput, DataItemBody, DataItemBack } from '../type/index';
  import testPage from '../subpage/component/testPage.vue';
  import Tabless from './component/Tabless.vue';
  import { cloneDeep } from 'lodash-es';
  import type { Ref, UnwrapRef } from 'vue';
  import { useStore } from './pinia/pinia';
  import { message } from 'ant-design-vue';
  import router from '@/router';
  import { storeToRefs } from 'pinia';
  const pinia = useStore();
  const props = defineProps({
    currentPortsId: {
      type: Number,
    },
  });
  // 新增码表弹窗中的表格

  const columns1 = [
    {
      title: '参数名称',
      dataIndex: 'paramsName',
      width: '12%',
    },
    {
      title: '参数位置',
      dataIndex: 'paramsPath',
      width: '12%',
    },
    {
      title: '数据类型',
      dataIndex: 'paramsType',
      width: '12%',
    },
    {
      title: '是否必填',
      dataIndex: 'paramsIsNull',
      width: '12%',
    },
    {
      title: '默认值',
      dataIndex: 'paramsDefault',
      width: '12%',
    },
    {
      title: '参数描述',
      dataIndex: 'paramsMsg',
      width: '15%',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '25%',
    },
  ];
  const columns2 = [
    {
      title: '参数名称',
      dataIndex: 'bodyName',
      width: '20%',
    },
    {
      title: '数据类型',
      dataIndex: 'bodyType',
      width: '12%',
    },
    {
      title: '是否必填',
      dataIndex: 'bodyIsNull',
      width: '12%',
    },
    {
      title: '默认值',
      dataIndex: 'bodyDefault',
      width: '12%',
    },
    {
      title: '参数说明',
      dataIndex: 'bodyMsg',
      width: '15%',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '25%',
    },
  ];
  const columns3 = [
    {
      title: '参数名称',
      dataIndex: 'returnName',
      width: '30%',
    },
    {
      title: '数据类型',
      dataIndex: 'returnType',
      width: '12%',
    },
    {
      title: '参数说明',
      dataIndex: 'returnMsg',
      width: '15%',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '25%',
    },
  ];
  let dataSource1: Ref<DataItemInput[]> = ref([]);
  let dataSource2: Ref<DataItemBody[]> = ref([]);
  let dataSource3: Ref<DataItemBack[]> = ref([]);
  // dataSource1.value = [
  //   {
  //     codesId: 'MZB00022',
  //     portsId: 1,
  //     paramsId: 23,
  //     paramsName: '很低啊hi的',
  //     paramsPath: 'string',
  //     paramsIsNull: 1,
  //     paramsType: 'Object',
  //     paramsDefault: '1',
  //     paramsMsg: 'string',
  //   },
  //   {
  //     codesId: 'MZB0002',
  //     portsId: 2,
  //     paramsId: 34,

  //     paramsName: '2222222',
  //     paramsPath: 'string',
  //     paramsIsNull: 1,
  //     paramsType: 'Int',
  //     paramsDefault: '2',
  //     paramsMsg: 'string',
  //   },
  //   {
  //     codesId: 'MZB00013',
  //     portsId: 3,
  //     paramsId: 28,

  //     paramsName: '大大',
  //     paramsPath: 'string',
  //     paramsIsNull: 1,
  //     paramsType: 'Object',
  //     paramsDefault: '3',
  //     paramsMsg: 'string',
  //   },
  // ];

  // dataSource2.value = [
  //   {
  //     codesId: '37',
  //     portsId: 27,
  //     bodyId: 111,
  //     bodyName: '采是习军使',
  //     bodyIsNull: 34,
  //     bodyDefault: 'null',
  //     bodyParents: 7,
  //     bodyType: 26,
  //     bodyLevel: 3,
  //     bodyMsg: 'commodo id nulla mollit',
  //     children: [{ codesId: '3144', portsId: 234, bodyId: 45, bodyName: 'eee', bodyIsNull: 34, bodyDefault: null, bodyParents: 7, bodyType: 26, bodyLevel: 3, bodyMsg: 'commoddllit' }],
  //   },
  // ];
  // dataSource3.value = [
  //   {
  //     returnLevel: 47,
  //     returnId: 17,
  //     returnMsg: 'cillum culpa dolor voluptate',
  //     portsId: 83,
  //     codesId: '31',
  //     returnName: '领清品见收展层',
  //     returnType: 13,
  //     returnParents: 21,
  //   },
  //   {
  //     codesId: 'string',
  //     portsId: 3,
  //     returnId: 2,
  //     returnName: 'string',
  //     returnLevel: 2,
  //     returnType: 2,
  //     returnMsg: 'string',
  //     returnParents: 7,
  //     // children?: {},
  //   },
  //   {
  //     codesId: 'string',
  //     portsId: 34,
  //     returnId: 3,
  //     returnName: 'string',
  //     returnLevel: 2,
  //     returnType: 2,
  //     returnMsg: 'string',
  //     returnParents: 7,
  //     // children?: {},
  //   },
  // ];
  const emit = defineEmits(['prePage']);
  // console.log(addKey(dataSource1.value, 0, 0));
  //码表导入33333333333333333333
  let visibleJsonIn: Ref<boolean> = ref(false);
  const handleClickJsonIn = () => {
    visibleJsonIn.value = true;
  };
  const handleJsonInOk = (e: MouseEvent) => {
    console.log(e);
    visibleJsonIn.value = false;
  };
  const handleChange1 = (info: UploadChangeParam) => {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  };
  const fileList = ref([]);
  //导入导出结束

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  // 检查名字是否重复
  // const NameValidator = (_rule: any, value: string, callback: any) => {
  //   if (value) {
  //     console.log(value);
  //     let nameLength: number = props.newData?.split(',').indexOf(value);
  //     console.log(nameLength, 'nametheght');
  //     if (nameLength == -1) {
  //       return Promise.resolve();
  //     } else {
  //       return new Promise((resolve, reject) => {
  //         reject('码表名称不能重复');
  //       });
  //     }
  //   } else {
  //     return Promise.resolve();
  //   }
  // };

  // 测试弹窗开始
  let testValue: Ref<boolean> = ref(false);
  const showTestDialog = (show: string) => {
    // 子组件向外触发父组件事件“关闭”新增码表弹窗
    if (show === 'false') {
      testValue.value = false;
    } else {
      testValue.value = true;
    }
    console.log('');
  };
  // 展开新增弹窗
  const showTestModal = () => {
    // addCodeTable 是控制弹窗展示的变量
    testValue.value = true;
    // dialogStatue.value = 'add';
  };
  // 测试弹窗结束

  // 检查是否为汉字
  // const isHan = () => {
  //   let han = /^[\u4e00-\u9fa5]{2,16}$/;
  //   //获取输入框中的数据
  //   // let vals = formState.codesName;
  //   if (!han.test(vals)) {
  //     return false;
  //   } else {
  //     return true;
  //   }
  // };
  let handlePre = () => {
    emit('prePage', { num: 1 });
    // peopleRejisterStatus.value = 1;
  };
  // 取消按钮
  let cacelbottombtn: Ref<boolean> = ref(false);
  // 保存并退出按钮
  const handleClickSaveAndQuit = async () => {
    // 连接接口发送请求新增第一个页面    -- 已成功
    const res = await Registration1(pinia.$state.peopleOnePageNewData);
    pinia.getPeopleOnePageNewData();

    // console.log(res, '1');

    // 人工注册新增输入参数接口
    console.log(pinia.$state.dataSource1, '看看');
    const resInput = await RegistrationInput(pinia.$state.dataSource1);
    console.log(resInput, '2');

    // 人工注册新增请求Body接口
    console.log(pinia.$state.dataSource2, '22222');
    const resBody = await RegistrationBody(pinia.$state.dataSource2);
    console.log(resBody, '3');

    // 人工注册新增返回参数接口 -- 已成功
    // const { dataSource3 } = storeToRefs(pinia);
    // let data = { [...dataSource3.value], dirId: pinia.$state.peopleOnePageNewData.dirId, portsName: pinia.$state.peopleOnePageNewData.portsName };
    // console.log(data, 'dadada');

    const resBack = await RegistrationBack(pinia.$state.dataSource3);
    console.log(pinia.$state.dataSource3, '看看');

    console.log(resBack, '4');

    router.push('/home/Interfaceto');
  };
</script>
<style lang="less" scoped>
  .content {
    width: 100%;

    .top_p {
      margin-top: 10px;
      border-bottom: 1px solid rgb(179, 179, 179);
      width: 100%;
      height: 40px;
      text-align: center;

      span {
        display: inline-block;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        line-height: 30px;
      }

      span:nth-child(1) {
        border: #000 1px solid;
        color: #000;
      }

      span:nth-child(2) {
        color: aliceblue;
        background-color: #4da0ff;
      }
    }

    .middle {
      .ant-form {
        .ant-form-item {
          margin-left: 50px;
          //   text-align: left;
        }

        .ant-form-item:nth-child(1) {
          :deep(.ant-table-thead
              > tr
              > th:not(.ant-table-cell:nth-child(5)):not(.ant-table-cell:nth-child(6)):not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before) {
            position: static;
            display: inline-block;
            margin-right: 8px;
            font-size: 14px;
            font-family: SimSun, sans-serif;
            color: #ff4d4f;
            transform: translateY(0px);
            content: '*';
          }
        }

        .ant-form-item:nth-child(2) {
          :deep(.ant-table-thead
              > tr
              > th:not(.ant-table-cell:nth-child(4)):not(.ant-table-cell:nth-child(5)):not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before) {
            position: static;
            display: inline-block;
            margin-right: 8px;
            font-size: 14px;
            font-family: SimSun, sans-serif;
            color: #ff4d4f;
            transform: translateY(0px);
            content: '*';
          }
        }

        .ant-form-item:nth-child(3) {
          :deep(.ant-table-thead > tr > th:not(.ant-table-cell:nth-child(3)):not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before) {
            position: static;
            display: inline-block;
            margin-right: 8px;
            font-size: 14px;
            font-family: SimSun, sans-serif;
            color: #ff4d4f;
            transform: translateY(0px);
            content: '*';
          }
        }
      }
    }

    .testbtn {
      margin-left: 150px;
      color: aliceblue;
      background-color: rgb(23, 181, 52);
    }

    footer {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
  }
</style>
